<!--
 * @Descripttion: 
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-18 11:29:00
 * @LastEditors: 淏
 * @LastEditTime: 2024-03-12 13:00:02
-->
<template>
  <div id="app">
    <!-- 页面切换动画transitionName -->
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    // 组件名称
    name: 'App',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    // 组件状态值
    data() {
      return { transitionName: '' }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {
      $route(to, from) {
        if (to.meta.index > from.meta.index) {
          this.transitionName = 'slide-left'
        } else {
          this.transitionName = 'slide-right'
        }
      },
    },
    // 组件方法
    methods: {},
    created() {},
    mounted() {},
  }
</script>

<style>
  @import './assets/css/main.css';
  /* @import './assets/css/element-#F8F8F9/index.css';
   @import './assets/css/color-dark.css'; */ /*深色主题*/
  /* @import './assets/css/theme-green/color-green.css'; /* 浅绿色主题 */
</style>

<style lang="less" scoped>
  //select下拉框透明设置
  /deep/.el-textarea__inner {
    background: transparent !important;
    color: #fff;
  }
  /deep/.el-input__inner {
    background: transparent !important;
    color: #fff;
  }
  /deep/.el-select-dropdown__item {
    line-height: 19px;
    color: #00ffff;
    font-weight: 200;
    background-color: #00083ebe;
  }
  /deep/.el-select-dropdown__item:hover {
    line-height: 19px;
    color: #00ffff;
    font-weight: 200;
    background-color: #01244e78;
  }
  /deep/.el-select-dropdown__item:selected {
    line-height: 19px;
    color: #00ffff;
    font-weight: 200;
    background-color: #001c3e78;
  }
  /deep/.el-select-dropdown {
    background-color: transparent;
    border: 1px solid blue;
    color: #00ffff;
  }
  /deep/.el-range-input {
    background-color: transparent;
    border: 1px solid blue;
  }
  /deep/.el-select-dropdown__list {
    padding: 0;
  }
  /deep/.el-popper[x-placement^='bottom'] {
    margin-top: 0px;
  }
  /deep/.el-popper .popper__arrow,
  /deep/.el-popper .popper__arrow::after {
    display: none;
  }
  .el-select-dropdown__item:hover {
    background-color: rgba(0, 225, 219, 0.690196078431373);
  }
</style>
<style>
  /*  // 编写slide-left 和 slide-right 类的动画 */
  .slide-right-enter-active,
  .slide-right-leave-active,
  .slide-left-enter-active,
  .slide-left-leave-active {
    will-change: transform;
    transition: all 500ms;
    position: absolute;
  }
  .slide-right-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .slide-right-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  .slide-left-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  .el-message {
    background: rgb(48 128 224 / 44%) !important;
    border: 1px solid #295a85 !important;
  }
  .el-message-box {
    background: rgb(48 128 224 / 34%) !important;
    border: 1px solid #295a85 !important;
  }
  .el-message-box__message {
    color: #00ffff;
  }
  .el-message-box__btns .el-button {
    background: rgba(0, 242, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .el-message-box__title {
    color: #00ffff !important;
    font-weight: 700;
  }
</style>
